<template>
    <div class="role-wrapper">
        <el-dialog title="确认抢单" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" center @close="cancelClick">
            <div class="detail-page">
                <div class="detail-wrap marg-B2">
                    <div class="top t-eight marg-B2">
                        编号：{{dataInfo.clue_id}}
                    </div>
                    <div class="case-list">
                        <div class="fw-7 t-three fs-18">
                            {{dataInfo.category_title}}
                        </div>
                        <div class="t-three marg-B2 marg-T1 fs-14">
                            {{dataInfo.content}}
                        </div>
                        <div class="t-eight marg-B1 flex">
                            <div class="t-three fs-14">
                                {{dataInfo.location}}
                            </div>
                            <div class="marg-L1">
                                <div class="marg-B1">
                                    <img class="phone-icon" src="../assets/images/phone-icon.png"/>
                                    <span class="fs-16 t-two marg-Lhalf">{{dataInfo.phone}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="">
                            <div v-if="dataType === 'garb'" style="margin-bottom: 14rpx;">
                                <span class="t-three fs-14">抢单：</span>
                                <span class="t-two fs-14">{{dataInfo.money_team}}</span>
                                <span class="t-two fs-12">分</span>
                            </div>
                            <div v-else>
                                <span class="t-three fs-14">独享：</span>
                                <span class="t-zero fs-14">{{dataInfo.money_alone}}</span>
                                <span class="t-zero fs-12">分</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <el-button class="btn gray" @click="cancelClick">取消</el-button>
                    <el-button class="btn" :class="dataType === 'garb'?'b-bg':'l-bg'" type="primary" @click="handleCheckedSure">确认</el-button>
                </div>		
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
export default {
    props: ['isDialog','dataType','dataInfo'],
    data() {
        return {
            loading: false,
            dialogVisible: false,
            detail: {}
        }
    },
    methods: {
        cancelClick() {
            this.dialogVisible = false
            this.$emit('closeClick')
        },
        handleCheckedSure() {
            const formData = new FormData();
            formData.append('clue_id',this.dataInfo.clue_id);
            formData.append('type',this.dataType === 'alone' ? '1' : '2')
            request({
                url: '/user/clue/buy',
                method: 'POST',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '抢单成功',
                        type: 'success'
                    });
                    this.dialogVisible = false
                    this.$emit('dialogSave')
                } else{
					this.$message({
					    message: res.message,
					    type: 'error'
					});
				}
            }).catch((error) => {
                this.$message({
                    message: error.message,
                    type: 'error'
                });
            })
        },
    },
    watch: {
        isDialog(newVal, oldVal) {
            this.dialogVisible = newVal
            this.detail = this.dataInfo
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/.el-dialog{
        border-radius: 15px;
    }
    .detail-page{
		.detail-wrap{
			padding: 30rpx;
			border-radius: 8px;
			background: rgba(255, 255, 255, 1);
			.top{
                padding-bottom: 20px;
				border-bottom: 1px solid #E5E5E5;
			}
			.case-list{
				.bot-t{
                    padding-top: 20rpx;
                    border-top: 2rpx solid #E5E5E5;
                    .right{
                        display: flex;
                    }
                }
                .phone-icon{
                    width: 26rpx;
                }
			}
		}
		.btn-box{
            text-align: center;
			// width: 100%;
			// height: 160rpx;
			// background: rgba(255, 255, 255, 1);
			// box-shadow: 0px -1px 4px  rgba(0, 0, 0, 0.2);
			// display: flex;
			// align-items: center;
			.btn{
				font-size: 14px;
                padding: 0;
				color: #fff;
				width: 96px;
                height: 30px;
				text-align: center;
				line-height: 30px;
				border-radius: 25px;
                border: none;
                margin: 0 20px;
			}
            .btn:hover{
                border: none;
            }
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
            .gray{
                background: #A6A6A6;
            }
		}
        //     .btn-box{
        //     padding-top: 20px;
        //     text-align: right;
        //     border-top: 1px solid #d5d5d5;
        //     .btn{
        //         padding: 0;
        //         width: 80px;
        //         height: 32px;
        //         border: none;
        //     }
        //     .gray{
        //         background: #d5d5d5;
        //     }
        // }
	}
</style>